<!-- components/StaffList.vue -->
<template>
  <div class="list-card" :class="{ 'mobile-list-card': isMobile }">
    <el-scrollbar :height="scrollbarHeight">
      <div class="list-container" v-if="staffList.length > 0">
        <div
          v-for="(item, index) in staffList"
          :key="item.id"
          class="staff-item"
          :class="[
            item.id === currentStaffId
              ? 'staff-item-selected'
              : 'staff-item-unselected',
            isMobile ? 'mobile-staff-item' : '',
          ]"
          @click="$emit('staff-select', item)"
        >
          <div class="staff-item-name">{{ item.name }}</div>
          <div class="staff-item-id">ID: {{ item.id }}</div>
          <div class="staff-item-org" v-if="item.organizations.length">
            {{ item.organizations.join(", ") }}
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <el-empty description="暂无人员信息"></el-empty>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
defineProps({
  staffList: {
    type: Array,
    default: () => [],
  },
  currentStaffId: {
    type: [String, Number],
    default: null,
  },
  scrollbarHeight: {
    type: String,
    default: "calc(100vh - 160px)",
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
});

defineEmits(["staff-select"]);
</script>

<style scoped>
.list-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--el-border-color-light);
  border-right: none;
}

.mobile-list-card {
  border: none;
  border-right: none;
}

.staff-item {
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
}

.mobile-staff-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.staff-item-unselected:hover {
  background-color: var(--el-fill-color-darker);
}

.staff-item-selected {
  background-color: var(--el-color-primary);
  color: var(--el-text-color-primary);
}

.staff-item-selected > * {
  color: var(--el-text-color-primary) !important;
}

.staff-item-name {
  font-weight: 500;
}

.staff-item-id {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.staff-item-org {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .staff-item-name {
    font-size: 16px;
  }
  
  .staff-item-id,
  .staff-item-org {
    font-size: 14px;
  }
}
</style>